<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
		<title>58速运-快狗打车</title>
		<link rel="shortcut icon" href="./img/favicon.png" type="image/x-icon" />
		<link rel="stylesheet" href="css/swiper.css">
		<link rel="stylesheet" href="css/iconfont.css">
		<script src="js/rem.js"></script>
		<script src="js/swiper.js"></script>
		<script src="./js/jquery-3.4.1.js"></script>
		<script src="js/speed58.js"></script>
		<link rel="stylesheet" href="css/speed58.css">
	</head>
	<body>
		<div id="app">
			<!--0、点击的按钮-->
			<div class="left-aside-btn">
			</div>
			<!--1、导航部分-->
			<div class="nav">
				<!--1-2.顶端的图标和标题-->
				<div class="up">
					<div class="mine left iconfont icon-mine"></div>
					<div class="title">58速运</div>
					<div class="liwu right iconfont icon-liwu">
						<!--角标-->
						<div></div>
					</div>
				</div>
				<!--1-3.标签-->
				<div class="tabs">
					<!-- 城市选择 -->
					<div class="tab city-wrap">
						<div class="city">北京</div>
						<div class="dropdown iconfont icon-xiajiantou"></div>
						<!-- 下拉的城市列表，使用ajax请求，使用for来动态添加 -->
						<ul class="cityList"></ul>
					</div>
					<div class="tab">小型面包</div>
					<div class="tab">金杯</div>
					<div class="tab">厢货</div>
					<div class="tab">小型平板</div>
					<div class="tab">大型平板</div>
				</div>
				<!--分割线 -->
				<div class="delimiter"></div>
			</div>
			<!--2.轮播图-->
			<div class="swiper-container">
				<div class="swiper-wrapper">
					<!--      <div class="swiper-slide">-->
					<!--        &lt;!&ndash; 介绍 &ndash;&gt;-->
					<!--        <div class="info">-->
					<!--          <p><span>260&nbsp;&nbsp;</span>(每5公里)</p>-->
					<!--          <div class="detail">-->
					<!--            <p>载重：1吨</p>-->
					<!--            <p>长宽高：2.7*1.4*1.2m</p>-->
					<!--            <p>超公里费：3.8元/公里</p>-->
					<!--            <p>容积：45方</p>-->
					<!--          </div>-->
					<!--          <a href="#">在线下单 <span class="iconfont icon-youjiantou"></span> </a>-->
					<!--        </div>-->
					<!--        &lt;!&ndash; 图片 &ndash;&gt;-->
					<!--        <img src="./img/1.png" alt="">-->
					<!--      </div>-->
					<!--      <div class="swiper-slide">Slide 2</div>-->
					<!--      <div class="swiper-slide">Slide 3</div>-->
				</div>
				<!-- 如果需要分页器 -->
				<div class="swiper-pagination"></div>
			</div>
			<div class="delimiter"></div>
			<div class="address">
				<div class="addnow">
					<div class="circlegreen"></div>
					<a>京学附属实验幼儿园总部（当前位...</a>
					<div class="always">
						<span class="glyphicon glyphicon-globe"></span>
						<p>常用线路</p>
					</div>
				</div>
				<div class="addnow">
					<div class="circlered"></div>
					<input type="text" placeholder="请输入目的地">
					<div class="arrowright">
						<span class="glyphicon glyphicon-menu-right"></span>
					</div>
				</div>
				<div class="addpurpose">
					<button type="button">
						<span>+</span>
						<span class="jia">添加目的地</span>
					</button>
					<a>请按卸货顺序填写以便估算价格</a>
				</div>
			</div>
			<!--4、费用-->
			<div class="fee">
				<div class="price">
					<div class="gusuan">
						<span class="yue">约</span>
						<span>￥</span>
					</div>
					<div class="shiji">
						<p>最终费用可能因实际行驶里程/等车等因素而异</p>
					</div>
				</div>
				<div class="usecar">
					<div class="yuyue">预约</div>
					<div class="shishi">实时用车</div>
				</div>
			</div>
			<div class="mask"></div>
			<!--6、左侧的用户导航-->
			<div class="userInfo">
				<img src="./img/23.png" alt="" class="userArt">
				<ul>
					<li>我的余额</li>
					<li>我的订单</li>
					<li>我的收藏</li>
					<li>我的积分</li>
					<li class="person">个人中心</li>
				</ul>
			</div>
		</div>
	</body>
</html>
